<div ng-include="'main/_/top.html'"></div>

<script type="text/ng-template" id="auth-endpoint-popup.html">
  <div>
    <ol style="padding-left:10px;">
      <li>{{'auth.eptpl.popup.msg1'|translate}}</li>
      <li>{{'auth.eptpl.popup.msg2'|translate}}<code>http://oss-cn-hangzhou-zmf.aliyuncs.com</code></li>
    </ol>
  </div>
</script>

<script type="text/ng-template" id="auth-preosspath-popup.html">
  <div>
    <ol style="padding-left:10px;">
      <li>{{'auth.presetOssPath.popup.msg1'|translate}}</li>
      <li>{{'auth.presetOssPath.popup.msg2'|translate}}</li>
    </ol>
  </div>
</script>

<script type="text/ng-template" id="auth-remember-popup.html">
  <div>
    {{'auth.remember.popup.msg1'|translate}}
  </div>
</script>

<script type="text/ng-template" id="auth-requestpay-popup.html">
  <div>
    {{'requestpay.popup.msg'|translate}}(<a ng-click="openURL('https://help.aliyun.com/document_detail/91337.html')">requestPayer</a>)
  </div>
</script>


<div style="overflow:auto;height:100%">

  <div class="clearfix" style="height:40px;"></div>

  <div class="col-sm-8 col-sm-offset-2">
    <div class="panel panel-default shadow10">
      <!-- <div class="panel-heading">
      AK登录
       </div> -->
      <div class="panel-heading pd0" style="border:0">

        <ul class="nav nav-tabs">
          <li role="presentation" ng-class="{active:gtab==1}"><a href="" ng-click="gtab=1">
            {{'auth.akLogin'|translate}}
            <!-- AK登录 -->
          </a></li>
          <li role="presentation" ng-class="{active:gtab==2}"><a href="" ng-click="gtab=2">
            {{'auth.tokenLogin'|translate}}
            <!-- 授权码登录 -->
          </a></li>
        </ul>

      </div>
      <div class="panel-body">

        <form ng-if="gtab==1" class="form-horizontal" name="form1" ng-submit="onSubmit(form1)">
          <div class="form-group">
            <label for="endpoint" class="col-sm-4 control-label"><span class="red">*</span> Endpoint:
              <span uib-popover-template="'auth-endpoint-popup.html'"
                    popover-trigger="'mouseenter'" popover-append-to-body="true">
                          <i class="fa fa-question-circle"></i>
                        </span>
            </label>
            <div class="col-sm-8" style="padding:0">

              <div ng-class="{'col-sm-12':eptplType=='default','col-sm-4':eptplType=='customize'||eptplType=='cname'}">
                <select class="form-control" ng-model="eptplType" ng-change="eptplChange(eptplType)">
                  <option value="default">{{'default'|translate}} ({{'public.cloud'|translate}})
                  </option>
                  <option value="customize">{{'customize'|translate}}</option>
                  <option value="cname">cname</option>
                </select>
              </div>
              <div style="display:flex;justify-content: space-around" class="col-sm-8"
                   style="padding-left:0" ng-if="eptplType=='customize'"
                   ng-class="{'has-error':!form1.endpoint.$valid}">
                <input type="text" required ng-model="item.eptpl" ng-pattern="/^http(s)?\:\/\//"
                       class="form-control" id="endpoint" name="endpoint" placeholder="http://">
              </div>
              <!--// cname -->
              <div style="display:flex;justify-content: space-around" class="col-sm-8"
                   style="padding-left:0" ng-if="eptplType=='cname'"
                   ng-class="{'has-error':!form1.endpoint.$valid}">
                <input type="text" required ng-model="item.eptplcname" ng-pattern="/^http(s)?\:\/\//"
                       class="form-control" id="cname" name="cname" placeholder="http://">
              </div>
            </div>
          </div>
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.aid.$valid }">
            <label for="aid" class="col-sm-4 control-label"><span class="red">*</span> AccessKeyId:</label>
            <div class="col-sm-8">
              <input type="text" required ng-model="item.id"
                     class="form-control" id="aid" name="aid"
                     placeholder="{{'auth.id.placeholder'|translate}}">
            </div>
          </div>
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.akey.$valid }">
            <label for="akey" class="col-sm-4 control-label"><span class="red">*</span>
              AccessKeySecret:</label>
            <div class="col-sm-8">
              <input type="password" required ng-model="item.secret"
                     class="form-control" id="akey" name="akey"
                     placeholder="{{'auth.secret.placeholder'|translate}}">
            </div>
          </div>

          <div ng-if="item.id.indexOf('STS.')==0" class="form-group has-feedback"
               ng-class="{'has-error': !form1.stoken.$valid }">
            <label for="stoken" class="col-sm-4 control-label"> STS Token:</label>
            <div class="col-sm-8">
              <input type="text" required ng-model="item.stoken"
                     class="form-control" id="stoken" name="stoken"
                     placeholder="{{'auth.stoken.placeholder'|translate}}">
            </div>
          </div>


          <div class="form-group" ng-class="{'has-error': !form1.osspath.$valid }">
            <label for="input3" class="col-sm-4 control-label">
              {{'auth.presetOssPath'|translate}}:
              <!-- 预设OSS路径(可选): -->
              <span uib-popover-template="'auth-preosspath-popup.html'"
                    popover-trigger="'mouseenter'" popover-append-to-body="true">
                            <i class="fa fa-question-circle"></i>
                          </span>
            </label>
            <div class="col-sm-8">
              <input type="text" name="osspath" ng-pattern="reg_osspath" ng-model="item.osspath"
                     class="form-control" id="input3"
                     placeholder="{{'auth.presetOssPath.placeholder'|translate}}">
            </div>
          </div>

          <div ng-if="item.osspath" class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <div class="checkbox">
                <label>
                  <input type="checkbox" ng-model="flags.requestpaystatus"
                         ng-true-value="'YES'" ng-false-value="'NO'">
                  {{'requestPay'|translate}}
                  <!-- 记住秘钥 -->

                  <span uib-popover-template="'auth-requestpay-popup.html'"
                        popover-trigger="'click'" popover-append-to-body="true">
                                             <i class="fa fa-question-circle"></i>
                                           </span>
                </label>
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="item.osspath && item.eptpl.indexOf('{region}')!=-1">
            <label for="input4" class="col-sm-4 control-label">
              <!-- <span class="red">*</span> -->
              {{'region'|translate}}:
              <!-- 区域: -->
            </label>
            <div class="col-sm-8">
              <select required ng-model="item.region"
                      class="form-control" id="input4"
                      placeholder="{{'auth.region.placeholder'|translate}}"
                      ng-options="rg.id as ('region.'+rg.id|translate) for rg in regions">
              </select>
            </div>
          </div>


          <div class="form-group">
            <label for="input5" class="col-sm-4 control-label">
              {{'auth.description'|translate}}:
              <!-- 备注(最多30个字): -->
            </label>
            <div class="col-sm-8">
              <input type="text" ng-model="item.desc" maxlength="30"
                     class="form-control" id="input5"
                     placeholder="{{'auth.description.placeholder'|translate}}">
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <div class="checkbox">
                <label>
                  <input type="checkbox" ng-model="flags.remember"
                         ng-true-value="'YES'" ng-false-value="'NO'">
                  {{'auth.remember'|translate}}
                  <!-- 记住秘钥 -->

                  <span uib-popover-template="'auth-remember-popup.html'"
                        popover-trigger="'mouseenter'" popover-append-to-body="true">
                                             <i class="fa fa-question-circle"></i>
                                           </span>
                </label>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <button type="submit" class="btn btn-primary">
                {{'auth.login'|translate}}
                <!-- 登入 -->
              </button>

              <button type="button" class="btn btn-default" ng-model="flags.showHis"
                      uib-btn-checkbox btn-checkbox-true="'YES'" btn-checkbox-false="'NO'">
                {{'auth.akHistories'|translate}}
                <!-- AK历史 -->
              </button>

            </div>
          </div>
        </form>


        <form ng-if="gtab==2" class="form-horizontal" name="form2" ng-submit="onSubmit2(form2)">

          <div class="form-group">
            <label for="input-x" class="col-sm-3 control-label"><span class="red">*</span>
              {{'auth.authToken'|translate}}:
              <!-- 授权码: -->
              <a href="" uib-tooltip="{{'auth.authToken.tooltip'|translate}}"
                 tooltip-append-to-body="true"
                 ng-click="openURL('https://github.com/aliyun/oss-browser/blob/master/docs/authToken.md')">
                <i class="fa fa-question-circle"></i></a></label>
            <div class="col-sm-9">

                            <textarea required ng-model="item.authToken" rows="10" ng-change="authTokenChange()"
                                      class="form-control" id="input-x"
                                      placeholder="{{'auth.authToken.placeholder'|translate}}">
                             </textarea>

              <small class="text-danger" ng-if="!authTokenInfo">
                {{'auth.authToken.error.invalid'|translate}}
                <!-- 请输入有效的授权码 -->
              </small>
              <small class="text-danger" ng-if="authTokenInfo && authTokenInfo.isExpired">
                {{'auth.authToken.error.expired'|translate}}
                <!-- 授权码已经过期 -->
              </small>
              <small class="text-success"
                     ng-if="authTokenInfo && !authTokenInfo.isExpired && authTokenInfo.expiration">
                ({{"auth.authToken.info.validUntil"|translate:{expiration:authTokenInfo.expirationStr}
                }},
                <!-- (有效期至{{authTokenInfo.expiration|timeFormat}},  -->
                {{'auth.authToken.info.leftTime'|translate}}:
                <my-timer class="text-warning" expiration="authTokenInfo.expiration"></my-timer>
                )
              </small>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
              <button ng-disabled="!authTokenInfo || authTokenInfo.isExpired" type="submit"
                      class="btn btn-primary">
                {{'auth.login'|translate}}
                <!-- 登入 -->
              </button>

            </div>
          </div>
        </form>


      </div>
    </div>
  </div>

  <div class="clearfix"></div>


  <div ng-if="gtab==1" class="col-xs-12" ng-show="flags.showHis=='YES'">
    <header>
      <h4 class="col-xs-6">
        {{'auth.akHistories'|translate}}
        <!-- AK历史 -->
      </h4>
      <div class="col-xs-6">
        <a href="" ng-click="showCleanHistories()" class="pull-right text-danger"
           style="padding-top:10px;">
          {{'auth.clearHistories'|translate}}
          <!-- 清空历史 -->
        </a>
      </div>
    </header>
    <table class="table table-condensed table-striped table-bordered">
      <tr>
        <th>-</th>
        <th>ID</th>
        <th>Secret</th>
        <th>{{'auth.description'|translate}}</th>
        <th>{{'actions'|translate}}</th>
      </tr>
      <tr ng-repeat="h in his">
        <td>{{$index+1}}</td>
        <td>{{h.id}}</td>
        <td>{{h.secret|hideSecret}}</td>
        <td>{{h.desc}}</td>
        <td>
          <a href="" ng-click="useHis(h)">{{'use'|translate}}</a> |
          <a href="" ng-click="showRemoveHis(h)" class="text-danger">{{'delete'|translate}}</a>
        </td>
      </tr>
    </table>
  </div>
  <div class="clearfix"></div>
</div>
